<template>
  <div class="recommend">
    <h3>推荐文章</h3>
    <ul>
      <li v-for="data in recommendData" :key="data._id">
        <div class="label">
          <div class="label-left" @click="gotoSkillPage(data._id)">
            <span>{{data.name}}</span>-
            <span class="strong">{{data.label}}</span>
          </div>
          <div class="label-right" @click="gotoUserInfo(data.userName)">{{data.userName}}</div>
        </div>
        <div class="tags" v-if="data.tags.length && data.tags[0]">
          <el-tag v-for="tag in data.tags" size="mini" :key="tag.id">{{tag}}</el-tag>
        </div>
        <div class="time">
          <span>创建时间：{{data.created | setDate}}</span>
          <span>更新时间：{{data.updated | setDate}}</span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapActions } from "Vuex";
export default {
  name: "recommend",
  props: {
    recommendData: ""
  },
  methods: {
    gotoSkillPage(id) {
      // 跳转到skill页面
      this.$router.push("/article/" + id);
    },
    gotoUserInfo(name) {
      this.getUserInfoInSkill(name)
        .then(res => {
          if (res.data.ok === 1) {
            if (res.data.data._id) {
              this.$router.push("/userinfo/" + res.data.data._id);
            } else {
              alert(res.data.data);
            }
          } else {
            alert(res.data.data);
          }
        })
        .catch(err => {
          alert(err);
        });
    },
    ...mapActions("user", ["getUserInfoInSkill"])
  }
};
</script>

<style lang="sass" scoped>
@import '@/assets/default.sass'
.recommend
  width: 100%
  background-color: #fff
  margin-top: 10px
  padding: 15px 25px
  h3
    width: 100%
    height: 40px
    padding-left: 10px
    line-height: 40px
    color: #000
    @include title-before(5px,20px,10px,0px,#eb2001)
  >ul
    width: 100%
    >li
      width: 100%
      border-bottom: 1px solid #eee
      margin-bottom: 10px
      padding: 10px 0
      .label
        width: 100%
        height: 30px
        line-height: 30px
        @include flex(space-between,center)
        .label-left, .label-right
          cursor: pointer
          &:hover
            color: #eb2001              
        .strong
          color: #333
          font-weight: 700
      .tags
        width: 100%
        height: 24px
        overflow: hidden
        @include flex(flex-start,center)
        .el-tag
          margin-right: 10px
      .time
        line-height: 20px
        height: 30px
        overflow: hidden
        @include flex(space-between, center)
        >span
          display: block
      &:last-child
        border: none
</style>